import React, { useState, useEffect } from 'react'
import { View, Button } from '@tarojs/components'
import { AtGrid, AtList, AtListItem, AtCheckbox, AtModal, AtModalHeader, AtModalContent, AtModalAction } from 'taro-ui'
import Taro, { useDidShow } from '@tarojs/taro'
import { ALLTABS } from '@/config'
import { request } from '@/utils'
import refule from '@/assets/images/refule.png'
import list from '@/assets/images/list.png'
import car from '@/assets/images/car.png'
import history from '@/assets/images/history.png'
import staff from '@/assets/images/staff.png'
import price from '@/assets/images/price.png'
import account from '@/assets/images/account.png'
import myAccount from '@/assets/images/myAccount.png'
import './index.less'


// ADMINISTRATOR "管理员"
// MOTORCADE "车队"
// DRIVER "司机"
// OPERATOR "操作员"
// FINANCE "财务"

const SHOWMODAL = ['ADMINISTRATOR', 'MOTORCADE']

const TABLIST = {
  'DRIVER': [
    {
      image: refule,
      value: '马上加油',
      url: '/pages/refuel/index',
      tabBar: true
    },
    {
      image: list,
      value: '油站列表',
      url: '/pages/fillingStation/index'
    },
    {
      image: history,
      value: '历史加油',
      url: '/pages/fightingDetails/index',
    },
  ],
  'MOTORCADE': [
    {
      image: list,
      value: '油站列表',
      url: '/pages/fillingStation/index'
    },
    {
      image: refule,
      value: '马上加油',
      url: '/pages/refuel/index',
      tabBar: true,
    },
    {
      image: car,
      value: '我的车队',
      url: '/pages/myFleetList/index'
    },
    {
      image: history,
      value: '历史加油',
      url: '/pages/fightingDetails/index',
    },
  ],
  'ADMINISTRATOR': [
    {
      image: list,
      value: '油站列表',
      url: '/pages/fillingStation/index'
    },
    {
      image: price,
      value: '油站油价',
      url: '/pages/fillingStation/index?flag=1'
    },
    {
      image: myAccount,
      value: '车队账户管理',
      url: '/pages/fleetList/index'
    },
    {
      image: car,
      value: '我的车队',
      url: '/pages/myFleetList/index'
    },
    {
      image: account,
      value: '车队记账管理',
      url: '/pages/booking/index'
    },
    {
      image: staff,
      value: '我的员工',
      url: '/pages/myStaff/index'
    }
  ]
}


const Home = () => {
  const date = new Date()
  const month = date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1
  const day = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate()
  const [cardData, setCardData] = useState([])
  const [myRole, setMyRole] = useState('')
  const [list, setList] = useState([])
  const [isOpened, setIsOpened] = useState(false)
  const [selectedList, setSelectedList] = useState([])
  const [info, setInfo] = useState(null)
  const setCardByRole = async () => {
    const userInfo = await Taro.getStorage({key: 'userInfo'})
    const { user: { role }} = JSON.parse(userInfo.data)
    setMyRole(role)
    setCardData(TABLIST[role])
  }
  const getOliList = async () => {
    Taro.showLoading({mask: true})
    const res = await request({url: 'hkshihua/user/supplier/list', data: {pageSize: 100000}})
    const newList = []
    const selected = []
    res.list.forEach((item) => {
      newList.push({ value: item.id, label: item.name})
      selected.push(item.id)
    })
    setList(newList)
    // 默认全选
    setSelectedList(selected)
    getDetails(selected)
  }
  const getDetails = async (e) => {
    Taro.showLoading({mask: true})
    const {vo} = await request({ url: 'hkshihua/user/getHomePageInfo', data: {oilSupplierIds: e ? e.join(',') : selectedList.join(',')}})
    setInfo(vo)
  }
  useDidShow(async () => {
    await getOliList()
    Taro.getCurrentPages()[0].getTabBar().setData({
      selected: 0
    })
  })
  useEffect(() => {
    Taro.getCurrentPages()[0].getTabBar().setData({
      list: ALLTABS[myRole]
    })
  }, [myRole])
  const  clickGrid = (item) => {
    if(item.tabBar) {
      Taro.switchTab({
        url: item.url
      })
      return
    }
    Taro.navigateTo({
      url: item.url
    })}
   const handleClick = () => {
    Taro.navigateTo({
      url: '/pages/fightingDetails/index'
    })
   } 
   useEffect(() => {
    setCardByRole()
    // getDetails()
   }, [])
   const handleOnchange = (e) => {
     setSelectedList(e)
   }
   const handleClose = () => {
     setIsOpened(false)
   }
  const handleMakeSure = () => {
    //TODO 缺少后台接口
    setIsOpened(false)
    getDetails()
  } 
  const handleListClick = () => {
    setIsOpened(true)
  }
  return (
    <View >
      {
      SHOWMODAL.includes(myRole) &&  
      <View className='t-modal-1 my' style={{background: '#7CACFE'}}>
        <AtList style={{background: '#7CACFE'}}>
          <AtListItem style={{color: '#fff'}} title={`已选择${selectedList.length}个加油站`} onClick={handleListClick} extraText={`${month}月${day}日`} />
          <View style={{color: '#fff'}} className='m-info'>
            <View class='m-info_item'>今日加油总计{info?.count}笔</View>
            <View class='m-info_item'>总计 {info?.totalOilNumber}升</View>
          </View>
          <AtListItem style={{color: '#fff'}} title='加油明细' arrow='right' onClick={handleClick} />
        </AtList>
      </View>
      }
      <View className='t-modal-1'>
        <AtGrid onClick={clickGrid} data={cardData} />
      </View>
      {
        isOpened && <AtModal isOpened={isOpened} onClose={handleClose}>
        <AtModalHeader>请选择</AtModalHeader>
        <AtModalContent>
          <AtCheckbox options={list} selectedList={selectedList} onChange={handleOnchange} />
        </AtModalContent>
        <AtModalAction>  <Button onClick={handleMakeSure}>确定</Button> </AtModalAction>
        </AtModal>
      }
    </View>
  )
}

export default Home